import { 
    Modal,
	Form,
	Input,
	message,
	Radio,
} from "antd";
import { createRef } from "react";
import { getCheckAccount, postUserRegister } from '../../assets/js/api'

import './index.css'

function Register(props) {
	const { 
		closeRegPopup,
	} = props;
	const form = createRef();
	const initFormVal = {
		account: '',
		password: '',
		username: '',
		gender: '0',
		introduction: ''
	}
	// 关闭注册框
	function close() {
		form.current.resetFields();
		closeRegPopup();
	}
	// 验证表单
	function validatorForm() {
		form.current.validateFields()
		.then(val => {
			// 注册用户
			postUserRegister(val)
			.then(res => {
				// 完成之间返回home
				const {code,message:content} = res.data;
				if (code === 1) {
					message.success(content); 
					closeRegPopup();
				}
				else message.error(content);
			})
			.catch(err => {
				console.log(err);
				message.error('err');
			});
		})
		.catch(err => {
			console.log(err);
			message.error({
				content: '请填写必填项',
				duration: 2
			});
		});
	}
	function validatorAccount(_, value) {
		if (value.trim() === '') {
			return Promise.reject('请输入账号')
		}
		return getCheckAccount({ acc: value })
		.then(res => {
			const {code, message} = res.data;
			console.log(code, message)
			if (code === 1) return Promise.resolve();
			if (code === 0) return Promise.reject(message);
			return Promise.reject('一个意外的错误,请稍后重试');
		})
		.catch(err => {
			console.log(err);
			return Promise.reject(err);
		});
	}
    return (
        <Modal 
			title="注册" 
			cancelText="取消"
			okText="注册"
			className="register_popup"
			visible={props.show} 
			bodyStyle={{padding:'12px'}}
			maskClosable={false}
			onOk={validatorForm} 
			onCancel={close}
		> 
			<Form
				labelCol={{span:5}}
				ref={form}
				initialValues={initFormVal}
				scrollToFirstError={true}
				validateTrigger={['onBlur', 'onChange']}
			>
				<Form.Item
					label="账号"
					name="account"
					hasFeedback
					rules={[
						{  validateTrigger:'onChange', type: 'string', max: 16, message: '密码不能超过16个中文或字符' },
						{ required: true, validateTrigger:'onBlur', validator: validatorAccount }
					]}
				>
					<Input placeholder="最长16个中文或字符" />
				</Form.Item>
				<Form.Item
					label="密码"
					name="password"
					hasFeedback
					rules={[
						{ required: true, validateTrigger:'onBlur', message: '请输入密码' },
						{  validateTrigger:'onChange', type: 'string', max: 16, message: '密码不能超过16个中文或字符' }
					]}
				>
					<Input type="password" placeholder="最长16个中文或字符" />
				</Form.Item>
				<Form.Item
					label="用户名"
					name="username"
					hasFeedback
					rules={[
						{ required: true, validateTrigger:'onBlur', message: '请输入用户名' },
						{  validateTrigger:'onChange', type: 'string', max: 16, message: '用户名不能超过16个中文或字符' }
					]}
				>
					<Input placeholder="最长16个中文或字符" />
				</Form.Item>
				<Form.Item
					label="性别"
					name="gender"
					rules={[{ required: true }]}
				>
					<Radio.Group defaultChecked="0">
						<Radio value="0">女</Radio>
						<Radio value="1">男</Radio>
					</Radio.Group>
				</Form.Item>
				<Form.Item
					label="简介"
					name="introduction"
				>
					<Input.TextArea className="introduction" rows={3} showCount maxLength={100}/>
				</Form.Item>
			</Form>
		</Modal>
    )
}

export default Register;